<template>
	<gui-page>
		<template v-slot:gBody>
			<view class="search-box_sticky search-box pl22 pr22 pb22 bgfff">
				<gui-search @inputting="inputting" @confirm="confirmSearch" @clear="clearSearch" placeholder="请输入关键词搜索"
					:customClass="['bgGray']" borderRadius="10rpx" height="80rpx" fontSize="30rpx"
					placeholderClass="plStyle"></gui-search>
			</view>
			<view class="banner pl22 pr22 pb22 bgfff">
				<gui-swiper :swiperItems="swiperItems" :width="706" :height="330" borderRadius="10rpx" :margin="0"
					:spacing="0"></gui-swiper>
			</view>
			<view class="pl22 pr22">
				<view class="notic flex-ac pl22 pr22 pt22 pb22 mt22 bgfff radius10">
					<text class="gui-icons mr16">&#xe656;</text>
					<gui-scroll-message>
						<text class="noWrap c606">横向滚动文本横向滚动文本横向滚动文本横向滚动文本横向滚动文本横向滚动文本横向滚动文本横向滚动文本</text>
					</gui-scroll-message>
				</view>
				<!-- <view class="tool-box">
					<view class="box bgfff radius10 mt22">
						<text class="title bold f38 c333">zz</text>
						<view class="list flex-ac-wrap">
							<view class="item flex-dc-ac mt22">
								<text class="item-icon cfff f56 icon-ym icon-ym-projectExample"
									style="background':#008cff"></text>
								<text class="item-text c333">哈哈</text>
							</view>
						</view>
					</view>
				</view>	 -->
				<view class="tool-box">
					<view class="box bgfff radius10 mt22" v-for="(item,index) in menuList" :key="item.id">
						<text class="title bold f38 c333">{{item.fullName}}</text>
						<view class="list flex-ac-wrap">
							<view class="item flex-dc-ac mt22" @tap="menuClick(childItem)"
								v-for="(childItem,childIndex) in item.children" :key="childItem.id">
								<text class="item-icon cfff f56" :class="childItem.icon"
									:style="{'background':childItem.iconBackground||'#008cff'}"></text>
								<text class="item-text c333 f26">{{childItem.fullName}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <HomeMenu :dataList="childMenuArr" :fullName="childFullName" ref="homeMenuRef" /> -->
			<gui-totop :top="pageScrollTop" bottom="200rpx" borderRadius="50%"></gui-totop>
		</template>
	</gui-page>
</template>

<script>
	// import {
	// 	getMenuList,
	// 	getUsualList
	// } from '@/api/apply.js'
	var img =
		"https://images.unsplash.com/photo-1661956602868-6ae368943878?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw2MHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=90";
	// import HomeMenu from '@/components/Home-menu/Home-menu.vue'
	export default {
		data() {
			return {
				swiperItems: [], //轮播
				keyword: '', //搜索关键字
				menuList: [], //菜单
				childMenuArr: [], // 子集菜单
				childFullName: '',
				pageScrollTop: 0, //滚动到顶部
				scrollTimer: null, //定时器返回顶部
			}
		},
		onPageScroll(e) { //页面滚动事件
			if (this.scrollTimer != null) {
				clearTimeout(this.scrollTime);
			}
			this.scrollTimer = setTimeout(() => {
				this.pageScrollTop = e.scrollTop;
			}, 0);
		},
		onLoad() {
			this.getBanner()
			this.getMenu()
		},
		methods: {
			menuClick(item) {
				this.$u.to(item.url)
			},
			getBanner() {
				this.swiperItems = [{
						image: img
					},
					{
						image: img
					},
					{
						image: img
					},
				]
			},
			getMenu() {
				this.menuList = [{
					fullName: '从业人员管理',
					children: [{
						fullName: '从业人员',
						icon: 'icon-ym icon-ym-signature',
						url: '/pages/cyrygl/cyry-warp/index'
					}, {
						fullName: '健康档案',
						icon: 'icon-ym icon-ym-yingyong',
						url: '/pages/cyrygl/jkda-warp/index'
					}, {
						fullName: '岗前检查记录',
						icon: 'icon-ym icon-ym-generator-section',
						url: '/pages/cyrygl/gqjcjl-warp/index'
					}]
				}, {
					fullName: '原料管理',
					children: [{
						fullName: '采购单',
						icon: 'icon-ym icon-ym-lianxi',
						url: '/pages/ylgl/cgd-warp/index'
					}, {
						fullName: '入库单',
						icon: 'icon-ym icon-ym-bigScreenExampl',
						url: '/pages/ylgl/rkd-warp/index'
					}, {
						fullName: '出库单',
						icon: 'icon-ym icon-ym-appForm',
						url: '/pages/ylgl/ckd-warp/index'
					}, {
						fullName: '食品添加剂使用记录',
						icon: 'icon-ym icon-ym-authorize',
						url: '/pages/ylgl/sptjjsyjl-warp/index'
					}, {
						fullName: '仓库库存管理',
						icon: 'icon-ym icon-ym-dataApplication',
						url: '/pages/ylgl/ckkcgl-warp/index'
					}, {
						fullName: '库存变动记录',
						icon: 'icon-ym icon-ym-dataDictionary',
						url: '/pages/ylgl/kcbdjl-warp/index'
					},{
						fullName: '食品类型管理',
						icon: 'icon-ym icon-ym-sysBillRule',
						url: '/pages/ylgl/splxgl-warp/index'
					}]
				}, {
					fullName: '过程控制',
					children: [{
						fullName: '食品留样记录',
						icon: 'icon-ym icon-ym-codeGeneration',
						url: '/pages/gckz/splyjl-warp/index'
					}, {
						fullName: '餐厨废弃物记录',
						icon: 'icon-ym icon-ym-documentPreviewExample',
						url: '/pages/gckz/ccfqwjl-warp/index'
					}, {
						fullName: '餐用具洗消记录',
						icon: 'icon-ym icon-ym-formExample',
						url: '/pages/gckz/cyjxxjl-warp/index'
					}, {
						fullName: '有害生物日管控记录',
						icon: 'icon-ym icon-ym-bigScreenDesign',
						url: '/pages/gckz/yhswrgkjl-warp/index'
					}, {
						fullName: '不合格食品处置记录',
						icon: 'icon-ym icon-ym-dataSync',
						url: '/pages/gckz/bhgspczjl-warp/index'
					}, {
						fullName: '设备维护记录',
						icon: 'icon-ym icon-ym-extend',
						url: '/pages/gckz/sbwhjl-warp/index'
					}, {
						fullName: '明厨亮灶智能监控',
						icon: 'icon-ym icon-ym-sysMonitor',
						url: '/pages/gckz/mclzznjk-warp/index'
					}]
				}, {
					fullName: '食品安全管理',
					children: [{
						fullName: '陪餐记录管理',
						icon: 'icon-ym icon-ym-dataModel',
						url: '/pages/spaqgl/pcjlgl-warp/index'
					}, {
						fullName: '每周食谱管理',
						icon: 'icon-ym icon-ym-formExample',
						url: '/pages/spaqgl/mzspgl/index'
					}]
				}, {
					fullName: '供应商档案',
					children: [{
						fullName: '原料供应商管理',
						icon: 'icon-ym icon-ym-department',
						url: '/pages/gysda/ylgysgl-warp/index'
					}, {
						fullName: '校外供餐单位管理',
						icon: 'icon-ym icon-ym-dataSource',
						url: '/pages/gysda/xwgcdwgl-warp/index'
					}, {
						fullName: '供餐单位考察记录',
						icon: 'icon-ym icon-ym-flowLaunch',
						url: '/pages/gysda/gcdwkcjl-warp/index'
					}, {
						fullName: '供餐单位供餐记录',
						icon: 'icon-ym icon-ym-flowForm1',
						url: '/pages/gysda/gcdwgcjl-warp/index'
					}]
				}, {
					fullName: '自查档案',
					children: [{
						fullName: '自查记录管理',
						icon: 'icon-ym icon-ym-formDesign',
						url: '/pages/zcda/zcjlgl-warp/index'
					}]
				}, {
					fullName: '日.周.月工作记录',
					children: [{
						fullName: '安全记录管理',
						icon: 'icon-ym icon-ym-highchartsWordcloud',
						url: '/pages/rzygzjl/aqjlgl-warp/index'
					}]
				}, {
					fullName: '安全培训',
					children: [{
						fullName: '课程管理',
						icon: 'icon-ym icon-ym-dataBackup',
						url: '/pages/aqpx/kcgl-warp/index'
					}, {
						fullName: '培训计划管理',
						icon: 'icon-ym icon-ym-flowEntrust',
						url: '/pages/aqpx/pxjhgl-warp/index'
					}, {
						fullName: '试卷管理',
						icon: 'icon-ym icon-ym-role',
						url: '/pages/aqpx/sjgl-warp/index'
					}, {
						fullName: '人员培训记录',
						icon: 'icon-ym icon-ym-information',
						url: '/pages/aqpx/rypxjl-warp/index'
					}, {
						fullName: '人员考试-从业人员',
						icon: 'icon-ym icon-ym-portalDesign',
						url: '/pages/aqpx/ryks-warp/index'
					}, {
						fullName: '报名培训-从业人员',
						icon: 'icon-ym icon-ym-sysMonitor',
						url: '/pages/aqpx/bmpx-warp/index'
					}]
				}, {
					fullName: '拍照留存',
					children: [{
						fullName: '食堂区域管理',
						icon: 'icon-ym icon-ym-highchartsColumn',
						url: '/pages/pzlc/stqygl-warp/index'
					}]
				}, {
					fullName: '应急处置',
					children: [{
						fullName: '应急处置管理',
						icon: 'icon-ym icon-ym-highcharts',
						url: '/pages/yjcz/yjczgl-warp/index'
					}]
				}]
				// let query = {
				// 	keyword: keyword.value
				// }
				// getMenuList(query).then(res => {
				// 	if (res.code == 200) {
				// 		// menuList.value = list
				// 	}
				// })
			},
			inputting(e) {

			},
			confirmSearch() {

			},
			clearSearch() {

			}
		}
	}
</script>

<style lang="scss">
	.search-box_sticky {
		z-index: 990;
		position: sticky;
		top: var(--window-top);
	}

	.tool-box {
		.box {
			padding: 20rpx 0;

			.title {
				padding-left: 30rpx;
			}

			.list {
				padding: 0 10rpx;

				.item {
					width: 170rpx;

					.item-icon {
						width: 88rpx;
						height: 88rpx;
						margin-bottom: 8rpx;
						line-height: 88rpx;
						text-align: center;
						border-radius: 20rpx;
					}
				}
			}
		}
	}

	.item-text {
		height: 80rpx;
		text-align: center;
	}
</style>